import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
// import styles from './ChooseModal.less';
import StandardTable from 'components/StandardTable2';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Button,
  Modal,
  Tag,
  message,
  Badge,
  Radio,
  TreeSelect,
  Icon,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;
const { CheckableTag } = Tag;
const Search = Input.Search;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;

@Form.create()
export default class GoodsModal extends PureComponent {
  constructor(props) {
    super(props);

    console.log('初始化数据');
    let one = {}
    let list = []
    if(this.props.goodsId) {
      one['goods_id'] = this.props.goodsId;
      one['goods_name'] = this.props.goodsName;
      list.push(one);
    }
   

    this.state = {
      selectedRowKeys: list
    }
  }

  // state = {
  //   selectedRowKeys: []
  // };

  componentWillReceiveProps(nextProps) {
    // console.log('componentWillReceivePropscomponentWillReceiveProps', nextProps.goodsId)
    let list = [];
    if (nextProps.goodsId && (nextProps.goodsId != this.props.goodsId)) {
      console.log('!!!!!!!!!!!!!>>>>>>>>>>>>>>>>>>>>>>')
      let one = {}
      one['goods_id'] = nextProps.goodsId;
      one['goods_name'] = nextProps.goodsName;
      list.push(one)
      this.setState({
        selectedRowKeys: list
      })
    }
  }


  handleSelectRows = rows => {
    console.log('选择数据', rows)
    this.setState({ selectedRowKeys: rows })
  };

  onChange() {

  }

  _okHandle() {
    if (this.state.selectedRowKeys && (this.state.selectedRowKeys.length > 0)) {
      this.props.goodsOk(this.props.current, this.state.selectedRowKeys);
      // this.setState({
      //   selectedRowKeys: []
      // })
    } else {
      message.error('请选择内容')
      return;
    }
  }

  _cancel() {
    // let list = [];
    this.props.setModalVisible(0, false);

    let list = [];
    if(this.props.goodsId) {
      let one = {}
      one['goods_id'] = this.props.goodsId;
      one['goods_name'] = this.props.goodsName;
      list.push(one);
    }
    
    this.setState({
      selectedRowKeys: list
    })
  }

  _query() {
    this.props.goodsSearch(this.props.form.getFieldsValue())
  }

  render() {
    const { record, form } = this.props;

    const tableData = {};
    tableData['list'] = this.props.goodsList;
    tableData['pagination'] = { pagination: false };

    const columns = [
      {
        title: '内容名称',
        dataIndex: 'goods_name',
        key: 'goods_name',
      },
      {
        title: '所属App',
        dataIndex: 'app_type',
        key: 'app',
        render(text, record) {
          return <span>{text == '1' ? '小萌早教' : text == '2' ? '小萌绘本' : text == '3' ? '萌萌乐视频' : text == '4' ? '萌萌乐儿歌' : '其他'}</span>;
        },
      },
      {
        title: '频道',
        dataIndex: 'channel_name',
        key: 'channel_name',
      },
    ]

    return (
      <Modal
        width={600}
        destroyOnClose
        title="选择商品"
        visible={this.props.goodsModalVisible}
        afterClose={() => { }}
        onOk={() => this._okHandle()}
        onCancel={() => this._cancel()}
      >
        <Form layout="inline">
          <Row >
            <Col md={8} >
              <FormItem labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} label="所属App">
                {this.props.form.getFieldDecorator('appType', { initialValue: 'undefined' })(
                  <Select style={{ width: '100px' }}>
                    <Option value="undefined">全部</Option>
                    <Option value="1">小萌早教</Option>
                    <Option value="2">小萌绘本</Option>
                    <Option value="3">萌萌乐视频</Option>
                    <Option value="4">萌萌乐儿歌</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col md={8}>
              <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} label="频道">
                {this.props.form.getFieldDecorator('channelId', {
                  // rules: [{ required: true, message: '请选择频道' }],  
                  initialValue: record ? record.channelId : null,
                })(<TreeSelect
                  style={{ width: '120px' }}
                  // value={this.state.value}
                  dropdownStyle={{ width: '100%', maxHeight: 300, overflow: 'auto' }}
                  treeData={this.props.channelTree}
                  placeholder="请选择"
                  treeDefaultExpandAll
                  onChange={this.onChange}
                />)}
              </FormItem>
            </Col>

            {/* <Col md={6}>
              <FormItem labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} label="商品名称">
                {this.props.form.getFieldDecorator('goodsName')(<Input style={{ width: '100%' }} />)}
              </FormItem>
            </Col>
            */}
            <Col md={5}>
              <FormItem>
                <Button type="primary" htmlType="submit" onClick={() => this._query()} >
                  查询
              </Button>
              </FormItem>

            </Col>
          </Row>
          <Row>

          </Row>
        </Form>
        <div style={{ height: '400px', overflow: 'auto' }}>
          <StandardTable
            bordered={true}
            selectedRows={this.state.selectedRowKeys}
            onSelectRow={this.handleSelectRows}
            rowKey={"goods_id"}
            data={tableData}
            pagination={false}
            columns={columns}
            page={'no'}
          />
        </div>


      </Modal>
    );
  }
}